<script setup lang="ts">
const menus = [
  {
    label: 'menu.file',
  },
  {
    label: 'menu.edit',
  },
  {
    label: 'menu.window',
  },
  {
    label: 'menu.help',
  },
]
</script>

<template>
  <ul>
    <li v-for="item in menus" :key="item.label">
      {{ $t(item.label) }}
    </li>
  </ul>
</template>

<style scoped lang="less">
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    display: inline-block;
    color: #eee;
    padding: 0.3em 0.5em;
    margin: 0.1em 0;
    &:hover {
      background-color: blue;
    }
  }
}
</style>
